<template>
  <qt-grid-view class="grid_view" ref="gridViewRef" :clipChildren="false" :clipPadding="false"
                @item-click="onItemClick"
                @item-bind="onItemBind" :spanCount="spanCount"
                :blockFocusDirections="['left','right']"
                :defaultFocus="defaultFocus" :listenBoundEvent="true" :loadMore="loadMore" :openPage='openPage'
                :preloadNo="preloadNo">
      <slot></slot>
  </qt-grid-view>
</template>
<script lang="ts">
import {defineComponent, ref, nextTick, reactive, watch} from 'vue';
import {QTGridViewItem, QTIGridView } from '@quicktvui/quicktvui3';

export default defineComponent({
  props:{
    itemList:{
      type:Array<any>,
      default:()=>{return []}
    },
    spanCount:{
      type:Number,
      default:12
    }
  },
  setup(props,{emit}) {
    const gridViewRef = ref<QTIGridView>()
    const data = reactive({
      defaultFocus: 0 as number,
      preloadNo: 0 as number,
      openPage: true
    })
    let listDataRec: Array<QTGridViewItem> = [];
    const onESCreate = (params) => {
    }
    const loadMore = (pageNo: number) => {
    }
    const onItemClick = (e) => {
      emit('itemClick',e)
    }
    const onItemBind = () => {
    }
    watch(() => props.itemList, (newValue, oldValue) => {
      console.log('newValue',newValue)
      let list:Array<QTGridViewItem>=[]
      list.push(...newValue.map(e=>{
        e.type=1
        e.decoration={
          top: 20,
          left: 20,
          right: 20,
          bottom: 20
        }
        return e
      }))
      console.log(list)
      listDataRec = gridViewRef.value!.init(list)
    })
    return {
      gridViewRef,
      listDataRec,
      ...data,
      onESCreate,
      loadMore,
      onItemBind,
      onItemClick,
    }
  }
});
</script>
<style scoped>
.grid_view{
  background-color: transparent;
  width: 1860px;
  height:1048px;
  margin:20px;
}

</style>
